---
section: Box Alignment
title: Align Items
slug: /docs/align-items/
---

# Align Items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

<carbon-ad />

| React props            | CSS Properties            |
| ---------------------- | ------------------------- |
| `alignItems={keyword}` | `align-items: {keyword};` |

## Stretch

Use `alignItems="stretch"` to stretch items to fill the container's cross axis:

```jsx preview color=light-blue
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      alignItems="stretch"
      bg="light-blue-200"
      borderRadius="md"
      p={4}
      spaceX={4}
    >
      <x.div
        py={4}
        flex="1 1 0"
        borderRadius="md"
        bg="light-blue-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        py={12}
        flex="1 1 0"
        borderRadius="md"
        bg="light-blue-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        py={8}
        flex="1 1 0"
        borderRadius="md"
        bg="light-blue-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="stretch">
    <x.div py={4}>1</x.div>
    <x.div py={12}>2</x.div>
    <x.div py={8}>3</x.div>
  </x.div>
</>
```

## Start

Use `alignItems="start"` to align items to the start of the container's cross axis:

```jsx preview color=fuchsia
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      alignItems="flex-start"
      bg="fuchsia-200"
      borderRadius="md"
      p={4}
      spaceX={4}
    >
      <x.div
        h={12}
        flex="1 1 0"
        borderRadius="md"
        bg="fuchsia-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        h={24}
        flex="1 1 0"
        borderRadius="md"
        bg="fuchsia-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        h={16}
        flex="1 1 0"
        borderRadius="md"
        bg="fuchsia-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="flex-start">
    <x.div h={12}>1</x.div>
    <x.div h={24}>2</x.div>
    <x.div h={16}>3</x.div>
  </x.div>
</>
```

## Center

Use `alignItems="center"` to align items along the center of the container's cross axis:

```jsx preview color=red
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      alignItems="center"
      bg="red-200"
      borderRadius="md"
      p={4}
      spaceX={4}
    >
      <x.div
        h={12}
        flex="1 1 0"
        borderRadius="md"
        bg="red-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        h={24}
        flex="1 1 0"
        borderRadius="md"
        bg="red-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        h={16}
        flex="1 1 0"
        borderRadius="md"
        bg="red-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="flex-center">
    <x.div h={12}>1</x.div>
    <x.div h={24}>2</x.div>
    <x.div h={16}>3</x.div>
  </x.div>
</>
```

## End

Use `alignItems="flex-end"` to align items to the end of the container's cross axis:

```jsx preview color=amber
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      alignItems="flex-end"
      bg="amber-200"
      borderRadius="md"
      p={4}
      spaceX={4}
    >
      <x.div
        h={12}
        flex="1 1 0"
        borderRadius="md"
        bg="amber-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        h={24}
        flex="1 1 0"
        borderRadius="md"
        bg="amber-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        h={16}
        flex="1 1 0"
        borderRadius="md"
        bg="amber-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="flex-end">
    <x.div h={12}>1</x.div>
    <x.div h={24}>2</x.div>
    <x.div h={16}>3</x.div>
  </x.div>
</>
```

## Baseline

Use `alignItems="baseline"` to align items along the container's cross axis such that all of their baselines align:

```jsx preview color=emerald
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      alignItems="baseline"
      bg="emerald-200"
      borderRadius="md"
      p={4}
      spaceX={4}
    >
      <x.div
        h={12}
        flex="1 1 0"
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        h={24}
        flex="1 1 0"
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        h={16}
        flex="1 1 0"
        borderRadius="md"
        bg="emerald-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="baseline">
    <x.div h={12}>1</x.div>
    <x.div h={24}>2</x.div>
    <x.div h={16}>3</x.div>
  </x.div>
</>
```

## Responsive

To control the alignment of flex items at a specific breakpoint, use responsive object notation. For example, adding the property `alignItems={{ md: "center" }}` to an element would apply the `alignItems="center` utility at medium screen sizes and above.

```jsx
<x.div display="grid" alignItems={{ md: 'center' }}>
  {/* ... */}
</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
